
<template>
  <div id="city_active">
    <empty v-if="activeList.length === 0" message="暂时没有活动"></empty>
    <ma-scroll v-else :down="true" :up="true" :refresh="refresh" :getMore="loadMore"  :showMsg="false" :init="init">
    <ul v-if="activeList.length !== 0">
      <loadmore :getMore="loadMore">
        <li v-for="(item, index) in activeList" :key="index" v-tap="{methods: checkDetail, activeId: item.id, status: item.isbaoming, shopName: item.shop&&item.shop.name}">
          <active-item :item="item"></active-item>
        </li>
      </loadmore>
    </ul>
     </ma-scroll>
  </div>
</template>
<script>
import Vue from "vue";
import magicHeader from "components/magicHeader";
import loadmore from "components/loadmore";
import empty from "components/empty-page.vue";
import activeItem from 'components/activeItem'
// service
import QueryFleetActivityListService from "services/community/activityList";
export default {
  name: "city_active_name",
  data() {
    return {
      activeList: [],
      query: {
        index: 2,
        count: 5
      },
      queryMore: true,
      init:false
    };
  },
  //
  // 截取日期字符串
  filters: {
    sliceDate: function(value) {
      value = value.split(" ").join("T");
      let resultDate = "";
      const WEEK_DAYS = [
        "",
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日"
      ];
      if (value) {
        let tempDate = new Date(value);
        let weekDay = WEEK_DAYS[tempDate.getDay()];
        let month = tempDate.getMonth() + 1;
        let day = tempDate.getDate();
        resultDate = `${cusPadStart(String(month), 2, 0)}/${cusPadStart(
          String(day),
          2,
          0
        )} ${weekDay}`;
      }
      return resultDate;
    },
    // 省份名去掉'省'字
    getProvinceName(value) {
      let index = value.indexOf("省");
      if (index > -1) {
        return value.substr(0, index);
      } else {
        return value;
      }
    }
  },
  created() {
    QueryFleetActivityListService.bind(Vue.prototype)(
      {
        pageable: {
          pageNumber: "1",
          pageSize: "5"
        },
        fleetId: ""
      },
      resp => {
        console.log(resp);
        this.activeList = resp.activityList;
        resp.activityList.forEach((item, index) => {
          console.log(item);
          if(item.deadline){
            this.checkDate(item.deadline, function() {
              item.isover = true;
            });
          }
          
          item.isbaoming = item.attends&&item.attends.some((_item, _index) => {
            return _item.memberId === this.$.userId;
          });
        });
        this.init = true
      }
    );
  },
  methods: {
    refresh(callback){
      this.query.index = 1
      let vm = this;
         return new Promise(function(resolve, reject) {
        QueryFleetActivityListService.bind(vm)(
          {
            pageable: {
              pageNumber: vm.query.index,
              pageSize: vm.query.count
            },
            fleetId: ""
          },
          res => {
            res.activityList.forEach((item, index) => {
              console.log(item);
              // vm.checkDate(item.deadline, function() {
              //   item.isover = true;
              // });
              // item.isbaoming = item.attends.some((_item, _index) => {
              //   return _item.memberId === vm.$.userId;
              // });
            });
            vm.activeList=res.activityList
            vm.query.index++;
               vm.init = true;
               resolve(callback);
          }
        );
      });
    },
    loadMore(callback) {
      let vm = this;
         return new Promise(function(resolve, reject) {
        QueryFleetActivityListService.bind(vm)(
          {
            pageable: {
              pageNumber: vm.query.index,
              pageSize: vm.query.count
            },
            fleetId: ""
          },
          res => {
            res.activityList.forEach((item, index) => {
              console.log(item);
              // vm.checkDate(item.deadline, function() {
              //   item.isover = true;
              // });
              // item.isbaoming = item.attends.some((_item, _index) => {
              //   return _item.memberId === vm.$.userId;
              // });
            });
            vm.activeList.push(...res.activityList)
            vm.query.index++;
               vm.init = true;
               resolve(callback);
          }
        );
      });
    },
    goBack() {
      this.$router.push({
        name: "carFri_home"
      });
    },
    // 查看活动详情
    checkDetail(params) {
      this.$router.push({
        name: "activity_list_detail",
        query: {
          activeId: params.activeId,
          status: params.status,
          shopName: params.shopName
        }
      });
    },
    checkDate(deadline, success) {
      console.log(attendDate < new Date());
      let attendDate = new Date(Date.parse(deadline.replace(/-/g, "/")));
      if (attendDate < new Date()) {
        success();
      }
    }
  },
  components: {
    magicHeader,
    empty,
    loadmore,
    activeItem
  }
};
/**
 * padstart方法
 */
function cusPadStart(str, len, strPre) {
  if (String.prototype.padStart) {
    str = str.padStart(len, strPre);
  } else {
    let tempLen = len - str.length;
    for (let index = 0; index < tempLen; index++) {
      str = strPre + str;
    }
  }
  return str;
}
</script>
<style lang="scss">
#city_active #wrapper{
        top: 100px;
    }
#city_active .attend-1 span {
  display: inline-block;
  margin-top: 44px;
  margin-left: 10px;
  color: #fff;
}
#city_active .little-info {
  display: flex;
  font-size: 13px;
  span:first-child {
    padding-right: 10px;
  }
  span {
    display: flex;
    align-items: center;
  }
  .img-icon {
    width: 19px;
  }
}
#city_active .scroller{
    width: 100%;
  }
 #city_active li{
   margin-bottom: 10px;
 }
</style>
